<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0" />
        <title>Wordle Game</title>
        <link
            rel="stylesheet"
            href="style.css" />
        <link
            rel="stylesheet"
            href="gmalert.min.css" />
    </head>
    <body>
        <div class="game-container">
            <div
                id="board"
                class="board"></div>
            <div class="keyboard">
                <input
                    type="text"
                    id="wordInput"
                    autofocus
                    title="Enter the word to guess" />
                <button id="submitWord" title="Submit the word">Submit</button>
            </div>
            <br />
            <hr />
            <br />
            <div class="config">
                <div>
                    <span>Word Length:</span>
                    <input
                        type="number"
                        id="wordLength"
                        value="5"
                        min="1"
                        max="10" 
                        disabled
                        title="This feature is disabled due to the current dictonary file only contains words of length 5" />
                    <span>Max Guesses:</span>
                    <input
                        type="number"
                        id="maxAttempts"
                        value="6"
                        min="1"
                        max="10"
                        title="How many times the player can guess the word before losing the game" />
                </div>
                <button id="newGame" title="Start a new game with the current settings">Start a New Game</button>
            </div>
        </div>
        <script src="gmalert.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>
